<template>
<div class="chartRight-root">
  <div style="width: 38vw;" >
    <div class="text-h4 q-mb-md">数据分析</div>
    <q-card flat class="q-pa-sm" style="background: rgb(8,53,59);width: 38vw;">
      <div class=" text-body1 q-ml-sm q-mb-sm text-weight-bold">全省环境污染分析</div>
      <div class="row justify-between">
        <q-card-section flat class="col-4 q-pa-xs" >
          <div class="q-pa-xs" style="background: rgb(33,74,80);height: 20vh;">
            <div class="text-grey-5" style="height: 10%;">企业环保资质汇总</div>
            <div class="column q-pt-md" style="height: 90%;">
              <div class="row col">
                <div class="col-4 text-body2">排污许可</div>
                <div class="col-6">
                  <q-linear-progress rounded size="6px" :value="0.4" color="green-13" class="q-mt-sm"/>
                </div>
                <div class="q-pl-xs">
                  50家
                </div>
              </div>
              <div class="row q-mt-sm col">
                <div class="col-4 text-body2">环保验收</div>
                <div class="col-6">
                  <q-linear-progress rounded size="6px" :value="0.3" color="green-13" class="q-mt-sm"/>
                </div>
                <div class="q-pl-xs">
                  50家
                </div>
              </div>
              <div class="row q-mt-sm col" >
                <div class="col-4 text-body2">环境评价</div>
                <div class="col-6">
                  <q-linear-progress rounded size="6px" :value="0.5" color="green-13" class="q-mt-sm"/>
                </div>
                <div class="q-pl-xs">
                  50家
                </div>
              </div>

            </div>
          </div>
        </q-card-section>
        <q-card-section flat class="col-4 q-pa-xs" >
          <div class="q-pa-xs" style="background: rgb(33,74,80);height: 20vh;">
            <div class="row justify-between" style="height: 20%;">
              <div class="text-grey-5">区域企业类型</div>
              <div class="text-grey-5 text-body2 cursor-pointer"><span>{{ currentCity }}</span>
                <q-icon name="arrow_drop_down" size="20px"></q-icon>
                <q-menu auto-close dark max-height="200px">
                  <q-list style="min-width: 50px">
                    <q-item clickable v-close-popup v-for="(item,index) in citys" :key="index">
                      <q-item-section>{{ item }}</q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </div>
            </div>
            <div id="companyTypeGraph" style="width: 100%;height: 80%;">

            </div>
          </div>

        </q-card-section>
        <q-card-section flat class="col-4 q-pa-xs">
          <div class="q-pa-xs" style="background: rgb(33,74,80);height: 20vh;">
            <div class="row justify-between" style="height: 10%;">
              <div class="text-grey-5">污染重点企业</div>
              <div class="text-grey-5 text-body2 cursor-pointer q-mr-sm" ><span>{{ currentCity }}</span>
                <q-icon name="arrow_drop_down" size="20px"></q-icon>
                <q-menu auto-close dark max-height="200px">
                  <q-list style="min-width: 50px">
                    <q-item clickable v-close-popup v-for="(item,index) in citys" :key="index">
                      <q-item-section>{{ item }}</q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </div>
            </div>
            <div class="row justify-between text-grey-5" style="height: 10%;">
              <div>企业名</div>
              <div>污染程度</div>
            </div><hr>
            <div class="column q-pt-md" style="height: 80%;">

              <div class="col text-body2 row justify-between">
                <div>阿里巴巴有限公司</div>
                <div class="text-red-6">严重污染</div>
              </div>


              <div class="col text-body2  row justify-between">
                <div>网易集团</div>
                <div class="text-red-6">严重污染</div>
              </div>



              <div class="col text-body2  row justify-between">
                <div>浙江吉利集团</div>
                <div class="text-red-6">严重污染</div>
              </div>



            </div>
          </div>

        </q-card-section>
      </div>
    </q-card>
    <div class="text-h6">环保资质取得情况</div>
    <div class="row justify-between" style="height: 16vh;width: 38vw;">

      <q-card flat class="q-pa-sm" style="background: rgb(6,49,56);width: 32%;height: 16vh;">

        <div class="text-subtitle1 text-weight-bold" style="height: 20%;">排污许可</div>
        <div class="column q-pt-sm" style="height: 80%;">
          <div class="row justify-between col">
            <div class="text-body2 text-no-wrap overflow-hidden" style="width: 75%;text-overflow: ellipsis; ">
              阿里巴巴有限公司阿里巴巴有限公司
            </div>
            <div class="text-red-5 text-body2" style="width: 25%;">未取得</div>
          </div>
          <div class="row justify-between col" >
            <div class="text-body2 text-no-wrap overflow-hidden" style="width: 75%;text-overflow: ellipsis; ">
              物产中大集团公司
            </div>
            <div class="text-red-5 text-body2" style="width: 25%;">未取得</div>
          </div>
          <div class="row justify-between col" >
            <div class="text-body2 text-no-wrap overflow-hidden" style="width: 75%;text-overflow: ellipsis; ">
              青山控股有限公司
            </div>
            <div class="text-red-5 text-body2" style="width: 25%;">未取得</div>
          </div>
          <div class="row justify-between col" >
            <div class="text-body2 text-no-wrap overflow-hidden" style="width: 75%;text-overflow: ellipsis; ">
              浙江横溢集团公司
            </div>
            <div class="text-red-5 text-body2" style="width: 25%;">未取得</div>
          </div>
        </div>

      </q-card>
      <q-card flat class="q-pa-sm" style="background: rgb(6,49,56);width: 32%;height: 16vh;">

        <div class="text-subtitle1 text-weight-bold" style="height: 20%;">排污许可</div>
        <div class="column q-pt-sm" style="height: 80%;">
          <div class="row justify-between col">
            <div class="text-body2 text-no-wrap overflow-hidden" style="width: 75%;text-overflow: ellipsis; ">
              阿里巴巴有限公司阿里巴巴有限公司
            </div>
            <div class="text-red-5 text-body2" style="width: 25%;">未取得</div>
          </div>
          <div class="row justify-between col" >
            <div class="text-body2 text-no-wrap overflow-hidden" style="width: 75%;text-overflow: ellipsis; ">
              物产中大集团公司
            </div>
            <div class="text-red-5 text-body2" style="width: 25%;">未取得</div>
          </div>
          <div class="row justify-between col" >
            <div class="text-body2 text-no-wrap overflow-hidden" style="width: 75%;text-overflow: ellipsis; ">
              青山控股有限公司
            </div>
            <div class="text-red-5 text-body2" style="width: 25%;">未取得</div>
          </div>
          <div class="row justify-between col" >
            <div class="text-body2 text-no-wrap overflow-hidden" style="width: 75%;text-overflow: ellipsis; ">
              浙江横溢集团公司
            </div>
            <div class="text-red-5 text-body2" style="width: 25%;">未取得</div>
          </div>
        </div>

      </q-card>
      <q-card flat class="q-pa-sm" style="background: rgb(6,49,56);width: 32%;height: 16vh;">

        <div class="text-subtitle1 text-weight-bold" style="height: 20%;">排污许可</div>
        <div class="column q-pt-sm" style="height: 80%;">
          <div class="row justify-between col">
            <div class="text-body2 text-no-wrap overflow-hidden" style="width: 75%;text-overflow: ellipsis; ">
              阿里巴巴有限公司阿里巴巴有限公司
            </div>
            <div class="text-red-5 text-body2" style="width: 25%;">未取得</div>
          </div>
          <div class="row justify-between col" >
            <div class="text-body2 text-no-wrap overflow-hidden" style="width: 75%;text-overflow: ellipsis; ">
              物产中大集团公司
            </div>
            <div class="text-red-5 text-body2" style="width: 25%;">未取得</div>
          </div>
          <div class="row justify-between col" >
            <div class="text-body2 text-no-wrap overflow-hidden" style="width: 75%;text-overflow: ellipsis; ">
              青山控股有限公司
            </div>
            <div class="text-red-5 text-body2" style="width: 25%;">未取得</div>
          </div>
          <div class="row justify-between col" >
            <div class="text-body2 text-no-wrap overflow-hidden" style="width: 75%;text-overflow: ellipsis; ">
              浙江横溢集团公司
            </div>
            <div class="text-red-5 text-body2" style="width: 25%;">未取得</div>
          </div>
        </div>

      </q-card>



    </div>
    <div class="q-mt-sm row justify-between" style="width: 38vw;">
      <q-card flat class="q-pa-sm" style="background: rgb(6,49,56)">
        <div class="text-subtitle1 text-weight-bold">区域企业平均分比</div>
        <div id="barGraph2" style="width: 18vw;height: 30vh;"></div>
      </q-card>
      <q-card flat class="q-pa-sm" style="background: rgb(6,49,56)">
        <div class="text-subtitle1 text-weight-bold">区域企业增长比</div>
        <div id="polylineGraph" style="width: 18vw;height: 30vh;"></div>
      </q-card>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "ChartsRight",
  props: {
    citys: {
      type: Array,
    },
    currentCity: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

    }
  },
  methods: {
    initBarGraphRight() { // 初始化右侧条形统计图
      var chartDom = document.getElementById('barGraph2');
      var myChart = this.$echart.init(chartDom);
      var option;
      // const iconSvg = '<svg t="1634103689622" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3574" width="200" height="200"><path d="" p-id="3575"></path></svg>'
      const iconSvg = 'path://M65.95584 66.06848v891.91936h892.032V66.06848H65.95584z'

      const labelSetting = {
        // show: true,
        position: 'right',
        offset: [10, 0],
        fontSize: 16
      };
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          containLabel: true,
          left: 20
        },
        yAxis: {
          // inverse: true,
          axisLine: {show: false},
          splitLine: {show: false},
          axisTick: {show: false}, // 刻度
          // axisLabel: {
          //   margin: 30,
          //   fontSize: 14
          // },
          axisPointer: {
            label: {
              show: true,
              margin: 30
            }
          },


        },
        xAxis: {
          data: this.citys,
          nameTextStyle: {
            borderWidth: 12,
          },
          splitLine: {show: false},
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: 'rgb(225,225,225)'
            },
            formatter: function (params) { // 纵向显示
              // params为x轴文字内容
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 1; //一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            },

          },
          axisTick: {show: false},
          axisLine: {show: true},


        },
        series: [
          {
            name: '2015',
            type: 'pictorialBar',
            label: labelSetting,
            symbolRepeat: true,
            symbolSize: ['80%', '40%'], // 标志长宽比例
            barCategoryGap: '40%', // 两柱间距
            data: [
              {
                value: 50,
                symbol: iconSvg,
                itemStyle: {
                  color: 'rgb(240,221,39)'
                }
              },
              {
                value: 80,
                symbol: iconSvg,
                itemStyle: {
                  color: 'rgb(240,221,39)'
                }
              },
              {
                value: 30,
                symbol: iconSvg,
                itemStyle: {
                  color: 'rgb(212,53,72)'
                }
              },
              {
                value: 60,
                symbol: iconSvg,
                itemStyle: {
                  color: 'rgb(41,243,161)'
                }
              },
              {
                value: 90,
                symbol: iconSvg,
                itemStyle: {
                  color: 'rgb(41,243,161)'
                }
              },
              {
                value: 55,
                symbol: iconSvg,
                itemStyle: {
                  color: 'rgb(240,221,39)'
                }
              },
              {
                value: 80,
                symbol: iconSvg,
                itemStyle: {
                  color: 'rgb(240,221,39)'
                }
              },
              {
                value: 50,
                symbol: iconSvg,
                itemStyle: {
                  color: 'rgb(212,53,72)'
                }
              },
              {
                value: 60,
                symbol: iconSvg,
                itemStyle: {
                  color: 'rgb(41,243,161)'
                }
              },
              {
                value: 70,
                symbol: iconSvg,
                itemStyle: {
                  color: 'rgb(41,243,161)'
                }
              },
              // {
              //   value: 80,
              //   symbol: iconSvg,
              //   itemStyle: {
              //     color: 'rgb(212,53,72)'
              //   }
              // }
            ]
          },

        ]
      };

      option && myChart.setOption(option);

    },
    initCompanyType() { // 初始化企业类型图表

      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echart.init(document.getElementById('companyTypeGraph'));

      // 指定图表的配置项和数据
      const option = {
        title: {
          // text: '圆环图的例子',
          left: 'center',
          top: 'center'
        },

        series: [
          {
            type: 'pie',
            radius: ['0%', '80%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: true,
            label: {
              show: false,
              position: 'center',
              // emphasis: {
              //   show: true
              // }
            },
            labelLine: {
              show: true
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'bold'
              }
            },
            data: [
              {
                value: 60,
                name: '化工'
              },
              {
                value: 15,
                name: '生物'
              },
              {
                value: 15,
                name: '纺织'
              },
              {
                value: 5,
                name: '钢铁'
              },
              {
                value: 5,
                name: '食品'
              }
            ],
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    initPolylineGraph() { // 初始化折线统计图
      var chartDom = document.getElementById('polylineGraph');
      var myChart = this.$echart.init(chartDom);
      var option;
      const arr = [-10, 10, 5, -5, 20, -8, 15, 20, 22, 7]
      option = {
        xAxis: {
          type: 'category',
          data: this.citys,
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: 'rgb(225,225,225)'
            },
            formatter: function (params) {
              // params为x轴文字内容
              var newParamsName = "";
              var paramsNameNumber = params.length; // 标签长度
              var provideNumber = 1; //一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            },

          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
        },
        // legend: {
        //   data: ['inc', 'dec',]
        // },
        series: [
          {

            type: 'line',
            symbol: 'circle',
            colorBy: 'data',// 从哪里取色
            label: {
              show:true,
              // color: '#FFF', // 标志颜色
              // position: 'top' // 在顶部显示
            },
            symbolSize: 10,
            lineStyle: {
              color: 'rgb(41,243,161)'
            },
            // itemStyle: {
            //   color: 'rgb(41,243,161)'
            // },
            data: arr.map(function (item) { // 对数据进行处理
              return {
                name: item>0?'inc':'dec',
                value: item,
                label: {
                  show: true,
                  position: item>0?'top':'right',
                  color: item > 0 ? 'rgb(42,244,162)' : 'rgb(219,66,86)',
                },
                itemStyle: {
                  color: 'rgb(41,243,161)',
                }
              }
            })

          }
        ]
      };

      option && myChart.setOption(option);

    },
  },
  mounted() {
    this.initBarGraphRight();
    this.initCompanyType();
    this.initPolylineGraph();
  }
}
</script>

<style scoped>

</style>
